import React, {JSX} from 'react';
import {
    Col,
    Form, FormInstance,
    Row,
} from 'antd';
import {ColumnsConfig} from "./index";
import DynamicFormItem from "./DynamicFormItem";
import {ColumnConfig} from "./TableHeader.tsx";

const SearchForm: React.FC<{
    onSearchValueInit?: (key: string) => any,
    formRenderFactory?: (position: "edit" | "search", columnConfig: ColumnConfig,form:FormInstance) => JSX.Element | null
    columns: ColumnsConfig<any>
    colSpan: number
    form: FormInstance
}> = ({
          onSearchValueInit,
          formRenderFactory,
          columns, colSpan,form
      }) => {

    const formStyle = {
        borderTop: '1px solid #bfbfbf',
        maxWidth: 'none',
        paddingTop: 8,
        paddingBottom:5,
        paddingLeft: 20,
        height: '50px'
    };

    //支持搜索的数量
    let supportSearchCount = 0;
    columns.map((column) => {
        if (column.supportSearch) supportSearchCount++;
    });

    //第一行显示的表单数据
    const firstLineCount = (24 / colSpan) - 1;
    let firstLineCountVar = firstLineCount;

    //是否显示 "更多" 按钮
    const showMoreButton = supportSearchCount > firstLineCount;

    return (
        <Form name="form_search" style={formStyle} form={form}>
            <Row gutter={24}>
                {columns.map((columnConfig) => {
                    return showMoreButton  ? columnConfig.supportSearch && (firstLineCountVar-- > 0) &&
                        <Col span={colSpan} key={columnConfig.key}>
                            <DynamicFormItem columnConfig={columnConfig} onValueInit={onSearchValueInit}
                                             position="search"
                                             form={form}
                                             formRenderFactory={formRenderFactory}/>
                        </Col>
                        : columnConfig.supportSearch && (
                        <Col span={colSpan} key={columnConfig.key}>
                            <DynamicFormItem columnConfig={columnConfig} onValueInit={onSearchValueInit}
                                             position="search"
                                             form={form}
                                             formRenderFactory={formRenderFactory}/>
                        </Col>
                    )
                })}
            </Row>
        </Form>
    );
};


export default SearchForm
